<!--
  - Copyright (c) 2019.  武汉中科图灵科技有限公司
  - Date :  2019/1/5
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.6.2
  -->

<template>
  <div class="app-container calendar-list-container no-padding" v-if="Show">
    <el-container>
      <div class="flex-left-pannel flex-left-pannel__noright">
        <el-row>
          <div class="xf-tabletop-handles">
            <div class="xf-tabhd-left">
            </div>
            <div class="xf-tabhd-right">
              设备编号
              <el-input
                style="width: 200px;margin-right: 10px;"
                v-model="listQuery.no"
                placeholder="请输入设备编号"
                class="xf-query-input"
                size="mini"
              ></el-input>
              <el-button @click="tableQuery" type="primary" size="mini">查询</el-button>
              <el-button class="filter-item" @click="handleCreate" type="primary" size="mini">添加设备</el-button>
            </div>
          </div>
        </el-row>
        <border-warp widthAuto> <el-table key="tableKey" :data="list" v-loading.body="listLoading" fit style="width: 100%">
          <el-table-column align="center" label="序号" width="50">
            <template slot-scope="scope">
              <span>{{scope.row.id}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="led屏编号">
            <template slot-scope="scope">
              <span>{{scope.row.terminalScreenNo }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="创建者名称">
            <template slot-scope="scope">
              <span>{{scope.row.crtUserName }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="存储芯片坏块数量">
            <template slot-scope="scope">
              <span>{{scope.row.badQuantity}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="设备版本">
            <template slot-scope="scope">
              <span>{{scope.row.deviceVersion }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="心跳间隔时间（秒）">
            <template slot-scope="scope">
              <span>{{scope.row.heartbeatInterval }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="高度">
            <template slot-scope="scope">
              <span>{{scope.row.height }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="在线状态">
            <template slot-scope="scope">
              <span>{{scope.row.online == 0 ? '离线':'在线' }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="节目单播放状态">
            <template slot-scope="scope">
              <span v-if="scope.row.programListShowing == 0">播放正常</span>
              <span v-else-if="scope.row.programListShowing == 1">无节目单</span>
              <span v-else-if="scope.row.programListShowing == 2">节目单过期</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="素材播放状态">
            <template slot-scope="scope">
              <span v-if="scope.row.materialShowing == 0">播放正常</span>
              <span v-else-if="scope.row.materialShowing == 1">无素材</span>
              <span v-else-if="scope.row.materialShowing == 2">素材过期</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="播放状态">
            <template slot-scope="scope">
              <span>{{scope.row.showStatus == 0 ? '停止播放':'正常播放' }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="操作" width="130" fixed="right">
            <template slot-scope="scope">
              <!-- <span @click="handleLink(scope.row)" style="color: #2CDEF5;" class="comm-table-btn"><i class="el-icon-setting"></i></span> -->
              <span
                @click="handleInstructions(scope.row)"
                style="color: #2CDEF5;"
                class="comm-table-btn"
              >
                <i class="el-icon-upload2"></i>
              </span>
              <span @click="handleUpdate(scope.row)" class="comm-table-btn">
                <icon-svg icon-class="bianji" style="fill:#2CDEF5" />
              </span>
              <span @click="handleDelete(scope.row)" class="comm-table-btn">
                <icon-svg icon-class="shanchu" style="fill:#2CDEF5" />
              </span>
            </template>
          </el-table-column>
        </el-table> </border-warp>
        <div v-show="!listLoading" class="pagination-container">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="listQuery.page"
            :page-sizes="[10,15,30, 50]"
            :page-size="listQuery.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </div>
    </el-container>
    <slider-panel :Show.sync="dialogFormVisible" custom-class="out-side-frame">
      <div class="form-content-frame">
        <el-form
          :model="form"
          ref="form"
          :rules="rules"
          label-width="100px"
          label-position="top"
          @submit.native.prevent
        >
          <el-form-item label="存储芯片坏块数量" prop="badQuantity">
            <el-input v-model.trim="form.badQuantity" placeholder="请输入存储芯片坏块数量"></el-input>
          </el-form-item>
          <el-form-item label="坐标位置信息" prop="gis">
            <el-input
              v-model="form.gis"
              placeholder="请标记地点"
              class="xf-input-withbtn"
              :disabled="true"
            >
              <el-button
                plain
                slot="append"
                class="xf-input-withbtn__rightbtn"
                @click="handleSelectMap"
              >
                <icon-svg icon-class="checklocal" />标记地点
              </el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="所属建筑" prop="oid">
            <el-select style="width:100%;" placeholder="请选择所属建筑" @change="unitChange" v-model="form.oid" filterable>
              <el-option
                v-for="item in unitList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="基色" prop="baseColour">
            <el-input v-model.trim="form.baseColour" placeholder="请输入基色" autosize></el-input>
          </el-form-item>
          <el-form-item label="led内容" prop="content">
            <el-input placeholder="请输入led内容" v-model.trim="form.content"></el-input>
          </el-form-item>
          <el-form-item label="led内容颜色" prop="contentColour">
            <el-select style="width:100%;" v-model="form.contentColour" placeholder="请选择">
              <el-option label="red" :value="1"></el-option>
              <el-option label="green" :value="2"></el-option>
              <el-option label="yellow" :value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="led内容字体" prop="contentFontBody">
            <el-select style="width:100%;" v-model="form.contentFontBody" placeholder="请选择">
              <el-option label="宋体" :value="1"></el-option>
              <el-option label="楷体" :value="2"></el-option>
              <el-option label="黑体" :value="3"></el-option>
              <el-option label="隶书" :value="4"></el-option>
              <el-option label="行书" :value="5"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="led内容字号" prop="contentSize">
            <el-select style="width:100%;" v-model="form.contentSize" placeholder="请选择">
              <el-option label="12*12" value="12*12"></el-option>
              <el-option label="16×16" value="16×16"></el-option>
              <el-option label="24×24" value="24×24"></el-option>
              <el-option label="32×32" value="32×32"></el-option>
              <el-option label="48×48" value="48×48"></el-option>
              <el-option label="64×64" value="64×64"></el-option>
              <el-option label="80×80" value="80×80"></el-option>
              <el-option label="96×96" value="96×96"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="led屏编号" prop="terminalScreenNo">
            <el-input v-model.trim="form.terminalScreenNo" placeholder="请输入led屏编号"></el-input>
          </el-form-item>
          <!-- <el-form-item label="删除标记" prop="delFlag">
            <el-select style="width:100%;" v-model="form.delFlag" placeholder="请选择">
              <el-option label="是" :value="1"></el-option>
              <el-option label="否" :value="0"></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="设备版本" prop="deviceVersion">
            <el-input v-model.trim="form.deviceVersion"  placeholder="请输入设备版本"></el-input>
          </el-form-item>
          <el-form-item label="心跳间隔时间（秒）" prop="heartbeatInterval">
            <el-input v-model.trim="form.heartbeatInterval" placeholder="请输入心跳间隔时间（秒）"></el-input>
          </el-form-item>
          <el-form-item label="宽度" prop="width">
            <el-input v-model.trim="form.width" placeholder="请输入宽度" ></el-input>
          </el-form-item>
          <el-form-item label="高度" prop="height">
            <el-input v-model.trim="form.height" placeholder="请输入高度"></el-input>
          </el-form-item>
          <!-- <el-form-item label="位置描述" prop="positionDescription">
            <el-input v-model.trim="form.positionDescription"></el-input>
          </el-form-item>-->
          <el-form-item>
            <el-button
              v-if="dialogStatus=='create'"
              type="primary"
              @click="create('form')"
              size="mini"
              native-type="submit"
            >确 定</el-button>
            <el-button
              v-else
              type="primary"
              @click="update('form')"
              size="mini"
              native-type="submit"
            >确 定</el-button>
            <el-button @click="cancel('form')" type="text" size="mini">取 消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </slider-panel>
    <el-dialog
      :visible.sync="dialogFormChildVisible"
      :show-close="false"
      :destroy-on-close="true"
      top="7vh"
      width="1140px"
      custom-class="fulldialog-child"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="dialog-custom__header">
        <div class="dialog-custom__header-title">
          标记设备
          <!-- <span v-if="form.no.length>0">-“{{equipmentType}} {{form.no}}”</span> -->
        </div>
        <div class="dialog-custom__btns">
          <el-button type="primary" size="mini" @click="savelnglat">保存</el-button>
          <el-button type="text" size="mini" @click="mapCancel">取消</el-button>
        </div>
      </div>
      <div class="dialog-map__container">
        <div class="dailogmap-top-search">
          <el-autocomplete
            v-model="searchText"
            :fetch-suggestions="onSearchResult"
            :trigger-on-focus="false"
            placeholder="请搜索或选择地点"
            @select="handleSelect"
            popper-class="dailog-addressbox-list"
            suffix-icon="el-icon-search"
          >
            <template slot-scope="{ item }">
              <span class="name">{{ item.name }}</span>
              <span class="addr">{{ item.district }}</span>
            </template>
          </el-autocomplete>
        </div>
        <el-amap
          vid="amap"
          ref="map"
          :rotateEnable="true"
          :plugin="plugin"
          :center="center"
          :zoom="zoom"
          :events="events"
          class="mapset"
          :resizeEnable="resized"
        >
          <el-amap-marker :position="center" :events="markerEvents"></el-amap-marker>
          <el-amap-info-window
            :position="center"
            :content="lnglatstr"
            :visible="infowvisible"
            :events="infowevents"
          ></el-amap-info-window>
        </el-amap>
      </div>
    </el-dialog>
    <el-dialog
      title="删除网关设备"
      :visible.sync="dialogDeleteVisible"
      :show-close="false"
      custom-class="xf-jc-dialog"
      width="360px"
    >
      <div class="xf-jc-deletect">
        <p>确定删除此网关设备？</p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" size="mini" @click="deleteD(currentSelectObj)">删除</el-button>
        <el-button size="mini" @click="dialogDeleteVisible = false" type="text">取消</el-button>
      </div>
    </el-dialog>

    <!-- 指令下达 -->
    <el-dialog
      title="指令下达"
      :visible.sync="dialogDeleteVisible3"
      :show-close="false"
      custom-class="xf-jc-dialog"
      width="360px"
    >
      <el-row>
        <el-col :span="6">
          <div style="display: flex;height: 36px;justify-content: center;align-items: center;">指令：</div>
        </el-col>
        <el-col :span="18">
          <el-radio-group style="line-height: 30px;" v-model="instructionsRelease">
            <el-radio :label="1">左箭头</el-radio>
            <br />
            <el-radio :label="2">停止标识圆点</el-radio>
            <br />
            <el-radio :label="3">右箭头</el-radio>
            <br />
            <el-radio :label="5">待机</el-radio>
          </el-radio-group>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="saveRelease()">确定</el-button>
        <el-button size="mini" @click="dialogDeleteVisible3 = false" type="text">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getDeviceList,
  createDevice,
  deleteDevice,
  updateDevice,
  getInstructions
} from "@/api/system/streeLight.js";
import sliderPanel from "@/components/SliderPanel";
import {
  getUnitAll //获取所有联网单位
} from "@/api/admin/network/index";
import location from "@/utils/positionLocation.js";

export default {
  name: "deviceTab",
  props: ["Show"],
  components: { sliderPanel },
  data() {
    let self = this;
    return {
      addLineVisible: false,
      center: [114.305215, 30.59293],
      lnglatstr: "暂无数据",
      searchOption: {
        city: "武汉",
        citylimit: false
      },
      searchText: "",
      equipmentType: "",
      searchResult: [],
      lng: 0,
      lat: 0,
      zoom: 15,
      resized: true,
      infowvisible: true,
      markerEvents: {
        click: e => {
          self.infowvisible = true;
        }
      },
      infowevents: {
        close() {
          self.infowvisible = false;
        }
      },
      events: {
        init: o => {
          o.setMapStyle("amap://styles/117f36d1e643cfd46d21660d866df29e");
          AMapUI.loadUI(["control/BasicControl"], function(BasicControl) {
            //缩放控件
            o.addControl(
              new BasicControl.Zoom({
                position: "rb" //右下角缩放
              })
            );
          });
        },
        click: e => {
          //点击地图事件
          // 这里通过高德 SDK 完成。
          let geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: "all"
          });
          self.center = [e.lnglat.lng, e.lnglat.lat];
          geocoder.getAddress(self.center, function(status, result) {
            if (status === "complete" && result.info === "OK") {
              if (result && result.regeocode) {
                self.lnglatstr = result.regeocode.formattedAddress;
              }
            }
          });
          this.infowvisible = true;
        }
      },
      plugin: [
        {
          pName: "Geolocation",
          events: {
            init(o) {
              // o 是高德地图定位插件实例
              o.getCurrentPosition((status, result) => {
                if (result && result.position) {
                  self.lnglatstr = result.formattedAddress;
                  self.lng = result.position.lng;
                  self.lat = result.position.lat;
                  self.center = [self.lng, self.lat];
                  self.$nextTick();
                }
              });
            }
          }
        },
        {
          pName: "Scale",
          events: {}
        }
      ],
      visible2: false,
      showdownload: false,
      form: {
        badQuantity: "",
        baseColour: "",
        content: "",
        contentColour: "",
        contentFontBody: "",
        contentSize: "",
        deviceVersion: "",
        heartbeatInterval: "",
        height: ""
      },
      rules: {
        gis: [
          { required: true, message: "请选择坐标位置信息", trigger: "blur"},
        ],
        badQuantity: [
          { required: true, message: "请输入存储芯片坏块数量", trigger: "blur"},
        ],
        oid: [
          { required: true, message: "请选择所属建筑", trigger: "blur"},
        ],
        baseColour: [
          { required: true, message: "请输入基色", trigger: "blur"},
        ],
        content: [
          { required: true, message: "请输入led内容", trigger: "blur"},
        ],
        contentColour: [
          { required: true, message: "请选择led内容颜色", trigger: "blur"},
        ],
        contentFontBody: [
          { required: true, message: "请选择", trigger: "blur"},
        ],
        contentSize: [
          { required: true, message: "请选择", trigger: "blur"},
        ],
        terminalScreenNo: [
          { required: true, message: "请输入led屏编号", trigger: "blur"},
        ],
        deviceVersion: [
          { required: true, message: "请输入设备版本", trigger: "blur"},
        ],
        heartbeatInterval: [
          { required: true, message: "请输入心跳间隔时间（秒）", trigger: "blur"},
        ],
        width: [
          { required: true, message: "请输入宽度", trigger: "blur"},
        ],
        height: [
          { required: true, message: "请输入高度", trigger: "blur"},
        ]
        // no: [
        //   {
        //     required: true,
        //     message: "请输入设备编号",
        //     trigger: "blur"
        //   },
        //   {
        //     min: 1,
        //     max: 100,
        //     message: "最多允许输入100个字符",
        //     trigger: "blur"
        //   }
        // ],
        // entity: [
        //   {
        //     required: true,
        //     message: "请选择 厂商 / 系列 / 型号",
        //     trigger: ["blur"]
        //   }
        // ],
        // isgeographicalPositionSign: [
        //   {
        //     required: true,
        //     message: "请选择位置",
        //     trigger: "change"
        //   }
        // ],
        // positionDescription: [
        //   {
        //     required: true,
        //     message: "请输入位置描述",
        //     trigger: "blur"
        //   },
        //   {
        //     min: 1,
        //     max: 50,
        //     message: "最多允许输入50个字符",
        //     trigger: "blur"
        //   }
        // ]
      },
      list: null,
      total: null,
      listLoading: true,
      slistQuery: {
        status: "-1",
        manufacturer: "全部",
        equipmentType: "全部",
        model: "",
        positionDescription: ""
      },
      listQuery: {
        page: 1,
        limit: 15,
        no: undefined
      },
      dialogFormVisible: false,
      dialogFormChildVisible: false,
      dialogDeleteVisible: false,
      dialogStatus: "",
      textMap: {
        update: "编辑网关设备",
        create: "添加网关设备"
      },
      tableKey: 0,
      manufeList: [],
      equipmentTypeList: [],
      entityOptions: [],
      editlnglat: "", //服务器保存的经纬度
      currentSelectObj: {},
      terminalID: "", // 表格选择ID
      dialogDeleteVisible3: false,
      instructionsRelease: 1, // 指令下达选择ID
      unitList: [],
    };
  },
  created() {
    this.getList();
    this.getUnitList();
  },
  methods: {
    mapCancel() {
      this.dialogFormChildVisible = false;
    },
    savelnglat() {
      this.dialogFormChildVisible = false;
      // this.$set(this.form, "isgeographicalPositionSign", "已标记");
      this.form.gis = this.center.join(",") || "";
    },
    handleSelect(item) {
      let lnglat = item.location;

      this.searchText = item.name;

      let self = this;
      if (lnglat) {
        this.center = [lnglat.lng, lnglat.lat];
      } else {
        let geocoder = new AMap.Geocoder({
          radius: 1000,
          extensions: "all"
        });
        geocoder.getLocation(item.name, function(status, result) {
          if (status === "complete" && result.info === "OK") {
            if (result && result.geocodes) {
              self.center = [
                result.geocodes[0].location.lng,
                result.geocodes[0].location.lat
              ];
              self.zoom = 12.2;
            }
          }
        });
      }

      this.lnglatstr = this.searchText;
      this.infowvisible = true;
    },
    getLocation() {
      let _that = this;
      let geolocation = location.initMap("map-container"); // 定位
      AMap.event.addListener(geolocation, "complete", result => {
        console.log(result);
        let { lng, lat } = result.position;
        _that.lat = result.position.lat;
        _that.lng = result.position.lng;
        _that.location = result.formattedAddress; 
        _that.center = [lng, lat];
        let self = _that;
        let geocoder = new AMap.Geocoder({
          radius: 1000,
          extensions: "all"
        });
        geocoder.getAddress(self.center, function(status, result) {
          if (status === "complete" && result.info === "OK") {
            if (result && result.regeocode) {
              self.lnglatstr = result.regeocode.formattedAddress;
            }
          }
        });
      });
    },

    onSearchResult(pois, cb) {
      let self = this;
      let searchkey = this.searchText;
      AMap.plugin(["AMap.Autocomplete"], function() {
        var autoOptions = {
          city: "" // 城市，默认全国
        };
        var autoComplete = new AMap.Autocomplete(autoOptions);
        autoComplete.search(searchkey, function(status, result) {
          // 搜索成功时，result即是对应的匹配数据
          if (result) {
            let results = result.tips;
            if (results) {
              cb(results);
            } else {
              //搜索无结果
              cb("");
            }
          }
        });
      });
    },
    handleSelectMap() {
      this.dialogFormChildVisible = true;
      if (this.dialogStatus == "create") {
        this.getLocation();
      }
      if (this.form.gis) {
        this.editlnglat = this.form.gis
      }
      let _this = this
      setTimeout(function() {
        if (_this.editlnglat.length > 0) {
          let stringArr = JSON.parse(JSON.stringify(_this.editlnglat)).split(",");
          let lng = Number(stringArr[0]);
          let lat = Number(stringArr[1]);
          _this.center = [lng, lat];

          let self = _this;
          let geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: "all"
          });
          geocoder.getAddress(self.center, function(status, result) {
            if (status === "complete" && result.info === "OK") {
              if (result && result.regeocode) {
                self.lnglatstr = result.regeocode.formattedAddress;
              }
            }
          });

          let marker = new AMap.Marker({
            position: [lng, lat],
            icon: ''
          })
        }
      },800)
    },
    handleClick() {},
    getUnitList() {
      getUnitAll("").then(res => {
        this.unitList = res.map(item => {
          return {
            value: item.id,
            label: item.oname
          };
        });
        this.unitChange(this.unitList[0].value);
      });
    },
    unitChange(val) {
      this.form.oid = val;
      // this.getDeviceList();
    },
    // 指令
    handleInstructions(row) {
      this.terminalID = row.terminalScreenNo;
      this.dialogDeleteVisible3 = true;
      this.instructionsRelease = 1;
    },
    // 下达指令
    saveRelease() {
      let thisStr = {};
      thisStr.deviceId = this.terminalID;
      thisStr.page = this.instructionsRelease;
      getInstructions(thisStr).then(res => {
        if (res.status == 200) {
          this.dialogDeleteVisible3 = false;
          this.$notify({
            title: "成功",
            message: "下达指令成功",
            type: "success"
          });
          this.getList();
        } else {
          this.$notify({
            title: "错误",
            message: res.message,
            type: "error"
          });
        }
      });
    },
    deleteD(row) {
      this.dialogDeleteVisible = false;
      deleteDevice(row.id).then(() => {
        this.$notify({
          title: "成功",
          message: "删除成功",
          type: "success",
          duration: 2000
        });
        this.getList();
      });
    },
    handleDelete(row) {
      this.dialogDeleteVisible = true;
      this.currentSelectObj = row;
    },
    tableQuery() {
      this.getList();
    },
    handleCreate() {
      this.dialogStatus = "create";
      this.handlerest();
      this.form = {}
      this.editlnglat = ''
      this.dialogFormVisible = true;

      // 厂商型号
      // createSelected().then(response => {
      //   this.entityOptions = response.data.options;
      // });
    },
    handlerest() {
      // this.form.no = "";
      // this.form.entity = [];
      // this.form.gis = "";
      // this.form.positionDescription = "";
      this.searchText = "";
    },
    handleLink() {},
    handleUpdate(row) {
      this.dialogStatus = "update";
      this.form = row;
      // this.$set(this.form, "isgeographicalPositionSign", "已标记");
      this.dialogFormVisible = true;
      // createSelected({ id: row.id })
      //   .then(response => {
      //     this.form.entity = response.data.selectedOptions;
      //     this.form.no = response.data.deviceSensor.no;
      //     this.form.isgeographicalPositionSign = '已标记';
      //     this.editlnglat = response.data.deviceSensor.geographicalPositionSign;

      //     this.form.positionDescription =
      //       response.data.deviceSensor.positionDescription;

      //     this.form.id = row.id;
      //     this.entityOptions = response.data.options;

      //     this.dialogFormVisible = true;
      //     this.dialogStatus = "update";
      //     this.equipmentType=row.equipmentType;
      //   })
      //   .catch(function(error) {
      //     console.log(error);
      //   });
    },
    create(formName) {
      const set = this.$refs;
      set[formName].validate(valid => {
        if (valid) {
          createDevice(
            this.form
            //   {
            //   no: this.form.no,
            //   entity: JSON.stringify(this.form.entity),
            //   geographicalPositionSign: this.editlnglat,
            //   positionDescription: this.form.positionDescription
            // }
          ).then(() => {
            this.dialogFormVisible = false;
            this.handlerest();
            this.$refs[formName].resetFields();

            this.getList();
            this.$notify({
              title: "成功",
              message: "创建成功",
              type: "success",
              duration: 2000
            });
          });
        } else {
          return false;
        }
      });
    },
    update(formName) {
      const set = this.$refs;
      set[formName].validate(valid => {
        if (valid) {
          updateDevice(this.form)
            .then(() => {
              this.dialogFormVisible = false;

              this.$refs[formName].resetFields();
              this.handlerest();
              this.getList();
              this.$notify({
                title: "成功",
                message: "修改成功",
                type: "success",
                duration: 2000
              });
            })
            .catch(function(error) {
              console.log(error);
            });
        } else {
          return false;
        }
      });
    },
    cancel(formName) {
      this.dialogFormVisible = false;

      this.handlerest();
      this.$refs[formName].resetFields();
    },
    download() {},
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    getList() {
      this.listLoading = true;
      getDeviceList(this.listQuery).then(res => {
        this.list = res.data.rows;
        this.total = res.data.total;
        this.listLoading = false;
      });
      // page(this.listQuery).then(response => {
      //   this.list = response.data.rows;
      //   this.total = response.data.total;
      //   this.listLoading = false;
      // });
    }
  },
  watch: {
    Show: function(val) {
      if (val) {
        this.getList();
      }
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.flex-left-pannel__noright {
  padding-right: 0;
}
.xf-input-withbtn__rightbtn {
  border: 0;
  height: 34px;
  margin-top: -8px !important;
}
.device-add-dialog {
  .el-dialog__title {
    font-size: 32px;
  }
  .el-dialog__header {
    margin-top: 20px;
  }
  .custom-dialog-btn {
    position: absolute;
    font-size: 30px;
    right: 40px;
    top: 20px;
    color: #fff;
    &:hover {
      cursor: pointer;
    }
  }
  .dialog-footer {
    text-align: left;
  }
}
// 精准查询
.xf-double-form {
  .xf-dbform-item {
    display: flex;
    justify-content: space-between;
    .xf-dbform-item__sleft {
      .el-input {
        width: 320px;
      }
    }
    .xf-dbform-item__sright {
      .el-input {
        width: 320px;
      }
    }
  }
}
.fulldialog-child {
  width: 1100px;
  .el-dialog__header {
    padding: 0;
  }
  .el-dialog__body {
    padding: 0;
  }
  .dialog-custom__header {
    display: flex;
    padding: 15px 20px;
    justify-content: space-between;
    .dialog-custom__header-title {
      font-size: 32px;
      line-height: 36px;
      color: #2bdef5;
    }
  }
  .dialog-map__container {
    width: 1100px;
    height: 750px;
    position: relative;
    overflow: hidden;
  }
  .amap-logo {
    display: none !important;
  }
  .amap-copyright {
    display: none !important;
  }
  .amap-ui-control-zoom {
    width: 35px;
    a {
      width: 35px;
    }
  }
  .amap-controls {
    .amap-geolocation-con {
      right: 0;
      right: 30px;
      left: auto !important;
      bottom: 106px !important;
      .amap-geo {
        right: 0;
        cursor: pointer;
      }
    }
  }
  .dailogmap-top-search {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9;
    width: 320px;
    .el-autocomplete {
      width: 100%;
    }
  }
  .amap-info {
    transform: translateY(-30px);
  }
}
// 搜索结果列表
.dailog-addressbox-list {
  li {
    .addr {
      font-size: 12px;
      color: #999;
    }
  }
}
.device-add-dialog > div {
  width: 500px;
  margin: 0 auto;
}
</style>
